<template>
  <div id="app">
    <h2>测试题</h2>
    <SubjectItem v-for="v of 5" :key="v" @submit="onSubmit(v - 1, $event)"></SubjectItem>
    <div>
      <FlagItem v-for="v of resultList" :key="v.no" :no="v.no" :text="v.resultText"></FlagItem>
    </div>
  </div>
</template>

<script>

// 1. 先把单个组件的功能封装好
// 2. 再组合起来
// 3. SubjectItem 维护好 结果，点击提交时，暴露结果文案给父组件
// 4. App.vue 组件监听 SubjectItem submit 事件的触发，找到对应的下标，修改结果文案
// 5. FlagItem 组件用 结果列表来渲染，将 no 和 text 传进去显示

import FlagItem from './components/FlagItem.vue'
import SubjectItem from './components/SubjectItem.vue'
export default {
  name: 'App',
  components: {
    FlagItem,
    SubjectItem
  },
  data() {
    return {
      // 结果列表
      resultList: [
        { no: 1, resultText: '未完成' },
        { no: 2, resultText: '未完成' },
        { no: 3, resultText: '未完成' },
        { no: 4, resultText: '未完成' },
        { no: 5, resultText: '未完成' },
      ]
    }
  },
  methods: {
    onSubmit(index, resultText) {
      // 1. 要知道点的是第几个的提交按钮
      // 2. 要知道结果文案是什么

      // console.log(index, resultText);

      // this.resultList[index] = { id: 3, resultText }

      this.resultList[index].resultText = resultText
    }
  }
};
</script>

<style>
body {
  background-color: #eee;
}

#app {
  background-color: #fff;
  width: 500px;
  margin: 50px auto;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  padding: 2em;
}
</style>